<template>
  <div class="nav-bar">
    <van-icon @click="toHome" name="wap-home-o" size="0.5rem" />
    <form action="/">
      <van-search
        v-model="searchkey"
        shape="round"
        show-action
        @search="search"
        placeholder="请输入搜索关键词"
      >
      <template #action>
        <div @click="search">搜索</div>
      </template>
      </van-search>
    </form>
    <van-icon @click="toUser" name="friends-o" size="0.5rem"/>
  </div>
</template>
<script>
export default {
  name: 'NavBar',
  data() {
    return {
      searchkey: ''
    }
  },
  methods: {
    /**
     * 导航到首页
     */
    toHome() {
      this.$router.push({
        path: '/home'
      })
    },
    /**
     * 导航到个人中心
     */
    toUser() {
      this.$router.push({
        path: '/user'
      })
    },
    /**
     * 搜索关键词
     */
    search() {
      const query = {
        goodsName: this.searchkey
      }
      this.$api.shop.getAllGoods(query).then(res => {
        if (res.code === 200) {
          this.$router.push('/goods-detail/' + res.data.records[0].id)
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.nav-bar{
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  background-color: #fff;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-around;
  align-items: center;
  z-index: 1;
}
</style>
